<!-- 文档头声明 -->
<!DOCTYPE html>
<!-- 根元素 容器 -->
<html lang="en">
    <!-- 头部标签 存放元信息-->
<head>
    <!-- 字符集别码 -->
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 浏览器选项卡标题 -->
    <title>Document</title>
    <!-- 内部样式表 -->
    <style>
        /* 标签选择器 */
        div{
            width: 50px;
            height: 50px;
            background-color: brown;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: blue;
        }

    </style>
</head>
<!-- 体部标签 -->
 <!-- 直接显示在浏览器中 -->
 
<body>
     <!-- 块级元素：1.独占一行空间 2.高度默认由元素内容决定 
                 3.可以通过css属性设置宽高 -->
                 <div>div</div>
                 <!-- <div>div</div> -->
             <!-- 行内元素：
                    1.与其他行内元素共享一行空间
                    2.高度默认由元素内容撑起
                    3.无法通过css属性设置宽高 -->
                 <span>行内元素</span>
                 <span>行内元素</span>
                 <em>斜体标签</em>
                 <i>斜体标签</i>
                 <b>加粗标签</b>
                 <strong>加粗标签</strong>
                 <sub>下标</sub>
                 <sup>上标</sup>
                 <!-- 超链接标签 target控制页面打开方式 -->
                 <a href="" target=""></a>
                 <!-- 图片标签 属性 标签内部属性 属性名=‘属性值’ src属性链接到图片地址 alt-->
                  <!--./当前目录 ../上一级目录  -->
                 <img width = 200px src="../音视频/6.jpg" alt="图片加载失败文字说明">
                 <img height="100" src="https://p1.ssl.qhimgs1.com/t04c7c65ac14e5078f1.jpg">
                 <!-- 视频标签video controls控制条 -->
                 <video autoplay controls src="../音视频/1.mp4"></video>
                 <!-- controls 控制条
                      autoplay 自动播放
                      Loop 循环播放
                      muted 静音播放
                      poster 封面 -->
                <audio Loop src="../音视频/1.mp3"></audio>
</body>
</html>